<template>
    <div class="photo">
        <div class="mui-slider">
            <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a class="mui-control-item" :class="{'mui-active':item.id===0}" href="#"
                       v-for="item in categoryList" :key="item.id" @click.prevent="getImgList(item.id)">
                        {{item.title}}
                    </a>
                </div>
            </div>
        </div>
        <ul>
            <li class="img-item" v-for="item in imgsList" :key="item.id" @click="goPhotoInfo(item.id)">
                <img v-lazy="item.img_url">
                <div class="item-desc">
                    <h2>{{item.title}}</h2>
                    <p>{{item.zhaiyao}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        mounted() {
            this.$mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005
            });
            this.getPhotoCategory();
            this.getImgList()
        },
        data() {
            return {
                categoryList: [],
                imgsList: []

            }
        },
        methods: {
            getPhotoCategory() {
                var url = `api/getimgcategory`;
                this.$http.get(url)
                    .then(resp => {
                        var data = resp.data;
                        if (data.status === 0) {
                            this.categoryList = data.message;
                            this.categoryList.unshift({
                                id: 0,
                                title: '全部'
                            })
                        }
                    })
            },
            getImgList(id = 0) {
                var url = `api/getimages/${id}`;
                this.$http.get(url)
                    .then(resp => {
                        var data = resp.data;
                        if (data.status === 0) {
                            this.imgsList = data.message
                        }
                    })
            },
            goPhotoInfo(id){
              this.$router.push(`/home/photoinfo/${id}`)
            }
        }
    }
</script>
<style lang="scss">


    .mui-scroll {
        touch-action: none;
    }

    .mui-slider {
        position: fixed;
        background-color: #fff;
    }

    ul {
        list-style: none;
        padding: 5px;
        position: relative;
        top: 38px;
        margin: 0 0 50px;

        img {
            width: 100%;
            display: block;
        }
    }

    .img-item {
        position: relative;
        margin-bottom: 5px;
        .item-desc {
            position: absolute;
            bottom: 0;
            background-color: rgba(0, 0, 0, .2);
            padding: 0 5px;
        }

        h2 {
            color: #fff;
            font-size: 16px;
        }

        p {
            color: #fff;
        }

    }

    img[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }

</style>

